<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title th:text="${file.title}"></title>
</head>
<body>

<!-- create a canvas for rendering PDF pages -->
<div id="pdf-container"></div>

<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js"></script>
<!--<script type="text/javascript" th:src="@{/js/pdf.js}"></script>-->
<script type="text/javascript" th:src="@{/js/pdf.worker.js}"></script>
<script th:inline="javascript">
  $(document).ready(function(){
    // Load a PDF document from a URL
    let url = [[${file.url}]]
    let path = [[${file.path}]]
    let localUrl = [[${file.localUrl}]]
    pdfjsLib.getDocument(localUrl).promise.then(pdfDoc => {
      // 获取第一页
      pdfDoc.getPage(1).then(page => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        const viewport = page.getViewport({ scale: 1 });
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        page.render({ canvasContext: context, viewport: viewport }).promise.then(() => {
          // 在上一步中定义的 DIV 元素中呈现 Canvas 元素
          document.getElementById('pdf-container').appendChild(canvas);
        });
      });
    });
  })

</script>

</body>
</html>
